<!--通用获得金钱改成-->
<template>
	<view class="mongc bj_center" :class="mc">
		<view class="mongc-mbox">
			<view class="mongc-mbox-tit">
				{{$t("getmoney.tit")}}
				<image src="/static/xx.png" @click="clmc"></image>
			</view>
			<view class="mongc-mbox-infobox bj_sx">
				<view class="f26 fwb mb30">
					{{$t("getmoney.tit2")}}
				</view>
				<image src="/static/qd/jbb.png" class="mongc-qpic mb30" mode=""></image>
				<view class="mongc-mbox-inpbox">
					{{mv}}{{$t("menu.$")}}
				</view>
				<view class="mongc-mbox-btn" @click="clmc">
					{{$t("getmoney.btn")}}
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		inject 
	} from 'vue';
	defineExpose({
		setm
	})
	const clgc = inject("clgc");
	let mc = ref("hid")
	let mv = ref(0)

	function clmc() {
		clgc();
	}

	function setm(v) {
		mc.value = "dh_1"
		mv.value = v
	}
</script>

<style lang="scss">
	.hid {
		display: none;
	}

	@media (min-width: 768px) {
		.mongc {
			// left: calc(50vw - 375rpx) !important;
			width: 750rpx !important;
			/* 与主容器同宽 */
		}
	}

	.mongc {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		/* 100% 相对于 #app 的宽度 */
		height: 100%;
		backdrop-filter: blur(5px);
		-webkit-backdrop-filter: blur(5px);
		background: rgba(0, 0, 0, 0.5);
		z-index: 9999;

		&-qpic {
			width: 132rpx;
			height: 132rpx;
		}

		&-mbox {
			width: 698rpx;
			background: linear-gradient(180deg, #1E3298 0%, #1C6882 100%);
			border-radius: 20rpx;

			&-tit {
				position: relative;
				height: 112rpx;
				line-height: 112rpx;
				text-align: center;
				font-size: 36rpx;
				color: #FFFFFF;
				background: linear-gradient(180deg, #50B6E9 0%, #186AD8 100%);
				border-radius: 20rpx 20rpx 0rpx 0rpx;

				image {
					position: absolute;
					width: 40rpx;
					height: 40rpx;
					top: 36rpx;
					right: 30rpx;
				}
			}

			&-infobox {
				padding: 30rpx 0 70rpx;
			}

			&-inpbox {
				width: 320rpx;
				height: 88rpx;
				line-height: 88rpx;
				text-align: center;
				font-size: 48rpx;
				color: #FFBE32;
				background: #003311;
				border-radius: 100rpx;
				margin-bottom: 60rpx;
			}

			&-btn {
				width: 320rpx;
				height: 88rpx;
				line-height: 88rpx;
				text-align: center;
				font-size: 40rpx;
				color: #704406;
				background: #F8C735;
				border-radius: 100rpx;
			}
		}
	}
</style>